import { DeleteOutlined, PlusOutlined, UserOutlined, MenuFoldOutlined } from '@ant-design/icons'
import { Conversations } from '@ant-design/x'
import type { ConversationsProps } from '@ant-design/x'
import { Avatar, Button, Flex, type GetProp, message, Modal, Space, Typography } from 'antd'
import { useMessageList } from '../../hooks/useMessageList'
import { useDispatch } from 'react-redux'
import {
  addConversation,
  changeSelectedKey,
  ChatListType,
  deleteConversation
} from '../../store/messageSlice'
import { Conversation } from '@ant-design/x/es/conversations'
import { FC } from 'react'
import style from './ConversationsList.module.scss'

interface ConversationsListProps {
  isMobile?: boolean
  showMobileMenu?: boolean
  onToggleMenu?: () => void
}

const ConversationsList: React.FC<ConversationsListProps> = ({ isMobile, onToggleMenu }) => {
  const { messageList, selectedKey } = useMessageList()
  const dispatch = useDispatch()

  const menuConfig: ConversationsProps['menu'] = conversation => ({
    items: [
      {
        label: '删除此对话',
        key: 'deleteChat',
        icon: <DeleteOutlined />
      }
    ],
    onClick: menuInfo => {
      menuInfo.domEvent.stopPropagation()
      // 删除对话
      if (menuInfo.key === 'deleteChat') {
        dispatch(deleteConversation(conversation.key))
      }
    }
  })

  const groupable: GetProp<typeof Conversations, 'groupable'> = {
    title: (group, { components: { GroupTitle } }) =>
      group ? (
        <GroupTitle>
          <Space>
            <Typography.Text strong>{group}</Typography.Text>
          </Space>
        </GroupTitle>
      ) : (
        <GroupTitle />
      )
  }

  const ConversationItem: Conversation[] = messageList.map((item: ChatListType) => {
    return {
      key: item.key,
      label: item.label,
      group: item.group,
      timestamp: item.timestamp
    }
  })

  const itemStyles: ConversationsProps['styles'] = {
    // 对话Item的样式
    item: {
      marginLeft: '-35px',
      paddingInlineStart: 8
    }
  }
  // 切换对话
  const activeChange = (key: string) => {
    dispatch(changeSelectedKey(key))
  }

  // 新建对话
  const createConversation = () => {
    dispatch(addConversation())
  }

  // 底部内容
  const ConverFooter: FC = () => {
    function deleteStorage() {
      // 弹框提示
      Modal.confirm({
        title: '提示',
        content: '确定要删除所有缓存吗？',
        onOk() {
          message.success('删除成功')
          localStorage.clear()
          setTimeout(() => {
            window.location.reload()
          }, 1000)
        }
      })
    }

    return (
      <Flex
        align="center"
        justify="space-between"
        style={{
          position: 'absolute',
          bottom: 0,
          padding: 20,
          width: '100%',
          boxSizing: 'border-box',
          borderTop: '1px solid #e8e8e8'
        }}
      >
        <Space>
          <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
          <Typography.Text strong>SongZX</Typography.Text>
        </Space>

        <Space style={{ cursor: 'pointer' }} onClick={deleteStorage}>
          <DeleteOutlined />
          <Typography.Text>清理缓存</Typography.Text>
        </Space>
      </Flex>
    )
  }

  return (
    <div className={style.container}>
      <Space style={{ padding: '15px' }}>
        <Avatar
          size={40}
          src={
            'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp'
          }
        ></Avatar>
        <Flex justify="space-between" style={{ width: '217px' }}>
          <Typography.Text strong style={{ fontSize: 20 }}>
            问一问
          </Typography.Text>
          {isMobile && <MenuFoldOutlined onClick={onToggleMenu} style={{ fontSize: '18px' }} />}
        </Flex>
      </Space>

      <Flex style={{ padding: '15px' }}>
        <Button
          color="primary"
          variant="outlined"
          icon={<PlusOutlined />}
          style={{ width: '100%' }}
          onClick={createConversation}
        >
          新建对话
        </Button>
      </Flex>

      <Conversations
        defaultActiveKey={selectedKey}
        activeKey={selectedKey}
        menu={menuConfig}
        items={ConversationItem}
        groupable={groupable}
        styles={itemStyles}
        onActiveChange={activeChange}
      />

      <ConverFooter />
    </div>
  )
}

export default ConversationsList
